<template>
    <div>
        <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原密码：" prop="oldpassword" :rules="[
                { required: true, message: '旧密码不能为空' }
            ]">
                <el-input v-model="numberValidateForm.oldpassword" type="password" autocomplete="off"
                    placeholder="请输入原密码" />
            </el-form-item>
            <el-form-item label="新密码：" prop="password" :rules="[
                { required: true, message: '新密码不能为空' }
            ]">
                <el-input v-model="numberValidateForm.password" type="password" autocomplete="off" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="repassword" :rules="[
                { required: true, message: '确认密码不能为空' }
            ]">
                <el-input v-model="numberValidateForm.repassword" type="password" autocomplete="off"
                    placeholder="请输入确认新密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">保存配置</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 引入 修改密码 接口
import { updatePwd } from '@/api/login'
const formRef = ref()
const numberValidateForm = reactive({
    oldpassword: '',
    password: '',
    repassword: ''
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 调用 修改密码 接口
            updatePwd(numberValidateForm).then(res => {
                console.log('updatePwd', res);
                // 修改成功之后将 数据 存入 sessionStorage 中
            })
            sessionStorage.setItem('updatePwd', numberValidateForm)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped></style>